<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="select_word"
          size="mini"
          placeholder="筛选关键词"
          class="handle-input mr10"
        ></el-input>
        <el-button
          type="primary"
          size="mini"
          @click="centerDialogVisible = true"
          >发布公告</el-button
        >
      </div>
      <el-table :data="data" stripe style="width: 100%">
        <el-table-column label="标题" width="380">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/Home/SpeAnnounce',
                query: { data: JSON.stringify(scope.row) },
              }"
              >{{ scope.row.title }}</router-link
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="publishTime"
          width="150"
          align="center"
          label="发布时间"
        >
        </el-table-column>
        <el-table-column prop="likes" label="点赞量" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <el-button size="mini" type="danger">删除</el-button>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tableData.length"
        >
          >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="公告"
      :visible.sync="centerDialogVisible"
      width="700px"
      center
    >
      <el-form ref="form" :model="annoForm" label-width="80px">
        <el-form-item label="公告标题">
          <el-input v-model="annoForm.title" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input
            type="textarea"
            v-model="annoForm.content"
            style="width: 500px"
            :autosize="{ minRows: 8 }"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addAnnounce" type="primary">发布</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 删除问题提示框 -->
    <el-dialog title="提示" :visible.sync="delVisiblePro" width="300px" center>
      <div class="del-dialog-cnt" align="center">
        删除不可恢复，是否确定删除？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="delVisiblePro = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="deleteRowPro"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除回答提示框 -->
    <el-dialog title="提示" :visible.sync="delVisibleAns" width="300px" center>
      <div class="del-dialog-cnt" align="center">
        删除不可恢复，是否确定删除？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="delVisibleAns = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="deleteRowAns"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "proandans-page",
  data() {
    return {
      tableData: [],
      tempData: [],
      multipleSelection: [],
      centerDialogVisible: false,
      select_word: "",

      pageSize: 5, // 页数
      currentPage: 1, // 当前页
      problemIDx: -1,
      answerIDx: -1,
      form: {
        tId: "",
        title: "",
        nickname: "",
        publishTime: "",
        likes: "",
        collectionTimes: "",
      },
      annoForm: {
        aId: JSON.parse(sessionStorage.getItem("admin")).aId,
        title: "",
        content: "",
      },
    };
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    select_word: function () {
      if (this.select_word === "") {
        this.tableData = this.tempData;
      } else {
        this.tableData = [];
        for (let item of this.tempData) {
          let title = item.title;
          if (title.includes(this.select_word)) {
            this.tableData.push(item);
          }
        }
      }
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取批量要删除的列表
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量删除
    delAll() {
      for (let item of this.multipleSelection) {
        this.handleDelete(item.userId);
        this.deleteRow(item.userId);
      }
      this.multipleSelection = [];
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getUrl(url) {
      //  return `${this.$store.state.HOST}/${url}`
      return `http://127.0.0.1:3007${url}`;
    },

    notify(title, type) {
      this.$notify({
        title: title,
        type: type,
      });
    },
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 获取问答
    getData() {
      this.tableData = [];
      this.tempData = [];
      let _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/admin/announcelist",
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          _this.tableData = response;
          _this.tableData.forEach((row) => {
            if (row.checkStatus === "1") {
              row.checkStatus = true;
            } else {
              row.checkStatus = false;
            }
          });
          _this.tempData = _this.tableData;
        },
      });
    },
    //发布公告
    addAnnounce() {
      let aId = this.annoForm.aId;
      let title = this.annoForm.title;
      let content = this.annoForm.content;
      let avatar = "admin.png";
      let _this = this;
      $.ajax({
        type: "get",
        data: { aId, avatar, title, content },
        url: "http://localhost:8080/forum/admin/addannounce",
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          if (response === 200) {
            _this.centerDialogVisible = false;
            _this.$notify({
              title: "发布成功",
              type: "success",
            });
            _this.getData();
          }
        },
      });
    },

    // // 确定删除问题
    // deleteRowPro() {
    //   let id = this.problemIDx;
    //   let params = { id };
    //   console.log(params);
    //   axios
    //     .post("api/deleteproblem", params)
    //     .then((res) => {
    //       console.log(res.data);
    //       if (res) {
    //         this.getData();
    //         this.notify("删除成功", "success");
    //       } else {
    //         this.notify("删除失败", "error");
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    //   this.delVisiblePro = false;
    // },
    // // 确定删除回答
    // deleteRowAns() {
    //   let id = this.answerIDx;
    //   let params = { id };
    //   console.log(params);
    //   axios
    //     .post("api/deleteanswer", params)
    //     .then((res) => {
    //       console.log(res.data);
    //       if (res) {
    //         this.getData();
    //         this.notify("删除成功", "success");
    //       } else {
    //         this.notify("删除失败", "error");
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    //   this.delVisibleAns = false;
    // },
  },
};
</script>

<style lang="less"scoped>
a {
  color: #0000ee;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

h2 {
  margin-bottom: 10px;
}

/deep/ .img-style img {
  width: 600px;
}

.pagination {
  display: flex;
  justify-content: center;
}

.dinVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 75px;
  color: #fff;
}
</style>

